/*------------------------------表单规范------------------------------*/
/*jForm表单        css框架*/

/*
            使用这个表单框架需要先与设计师沟通对以下一些样式进行设置：
            一行的宽高
            每一行的间距
            字体常用大小
            标题的样式
            内容的样式
            三种输入框的样式
            几种提示信息的样式
            使用方法：请查看帮助文档
         */
/*------------------------------------------------后台表单------------------------------------------------*/

/**
使用方法:

基础用法:
1.容器标签加入jForm类名
2.行标签加入jForm-row类名
3.列标签加入jForm-col类名
4.标题标签加入jForm-tit类名
5.内容标签加入jForm-con类名

一行多列:
1.目前最多支持到一行三列
2.给行标签额外加入 row-col2或者row-col3,表示这一行为2列或3列

例子:
<div class="jForm">
  <div class="jForm-row row-col2">
    <div class="jForm-col">
      <div class="jForm-tit">绑定域名<em></em></div>
      <div class="jForm-con">
        <Input class="jForm-mInput" />
        <span class="jForm-note">系统绑定域名</span>
      </div>
    </div>
    <div class="jForm-col">
      <div class="jForm-tit">默认编码<em></em></div>
      <div class="jForm-con">
        <Input class="jForm-mInput" />
        <span class="jForm-note">全站默认编码</span>
      </div>
    </div>
  </div>
  <div class="jForm-row">
    <div class="jForm-col">
      <div class="jForm-tit">URL地址</div>
      <div class="jForm-con">
        <Input class="jForm-lInput" />
        <span class="jForm-note">http://www.jspbox.com/jshop/</span>
      </div>
    </div>
  </div>
</div>
 */
/*--------------表单框架初始化标签样式--------------*/
.jForm{
  /*display:block;*/
}
.jForm label{
  display: inline-block;
}

.jForm input,
.jForm textarea,
.jForm select
{
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.jForm label input{
  vertical-align: middle;
}

/*--------------标题,内容--------------*/
.jForm-tit,
.jForm-con
{
  display: inline-block;
  font-size: 16px;
  vertical-align: top;
  min-height: 32px;
  line-height: 32px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.jForm-tit{
  text-indent: 10px;
}

.jForm-con >*{
  margin-right: 20px;
}
.jForm-con >*:last-child{
  margin-right: 0;
}


/*--------------所有行样式--------------*/
.jForm-row{
  border-bottom: 1px solid #eee;
  width:100%;
  font-size: 0;/* 避免影响垂直对齐 */
}

/*--------------行（默认一行一列）--------------*/
.jForm-tit{
  width:12%;/*每一行标题的宽度*/
}
.jForm-con{
  display: inline-block;
  width: 88%;/*一行一列内容宽度*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/*--------------行(一行二列)--------------*/
.row-col2 .jForm-col{
  width: 50%;
}
.row-col2 .jForm-tit{
  width:24%;/*一行二列标题的宽度*/
}
.row-col2 .jForm-con{
  width:76%;/*一行二列内容的宽度*/
}
/*--------------行（一行三列）--------------*/
.row-col3 .jForm-col{
  width: 33.3%;
}
.row-col3 .jForm-tit{
  width:36%;/*一行二列标题的宽度*/
}
.row-col3 .jForm-con{
  width:64%;/*一行二列内容的宽度*/
}
/*--------------行（通栏）--------------*/
.row-full .jForm-tit{
  width: 100%;
  margin-bottom: 10px;/*通栏内容与标题的距离*/
}
.row-full .jForm-con{
  padding: 0 10px;
  width: 100%;
}

/*--------------所有列样式--------------*/
.jForm-col{
  display: inline-block;
  width: 100%;
  padding: 10px 0;
  border: 1px solid transparent;
  font-size: 0;
}
/*清除浮动*/
.jForm-col:after{
  content: '';
  display: block;
  clear: both;
}
.jForm-col:hover{
  border-color: #d93912;
}
.jForm--closeHover .jForm-col:hover{
  border-color: transparent;
}


/*--------------输入框--------------*/
/*短输入框*/
.jForm-sInput{
  width: 6em;/*短输入框的宽度*/
}
/*中输入框*/
.jForm-mInput{
  width: 20em;/*中输入框的宽度*/
  max-width: 100%;  /* 限制最大宽度 避免小宽度下超出 */
}
/*长输入框*/
.jForm-lInput{
  width: 70%;/*长输入框的宽度*/
}
/*通栏输入框*/
.jForm-fInput{
  width: 100%;
}

/*数字输入框*/
.jForm-numInput{
  display: inline-block;
  width: 3em;
}

/*--------------提示文字样式--------------*/
/*说明*/
.jForm-note{
  clear: both;
  color:#999999;/*说明文字的颜色*/
}
/*提示*/
.jForm-tips{
  clear: both;
  color:red;/*提示文字的颜色*/
}
/*错误*/
.jForm-error{
  clear: both;
  padding:0.5% 1%;
  border:1px solid #FFDD99;/*错误文字的边框*/
  background-color:#FFE8E6;/*错误文字的背景色*/
  color: #333;/*错误文字的字体颜色*/
}
.jForm-note,
.jForm-tips,
.jForm-error
{
  font-size: 14px;
  /*display: inline-block;*/
}
.jForm-wordCount{
  font-size: 12px;
  color: #999;
}

/*--------------必填符号--------------*/
.jForm-row em{
  font-style: normal;
}
em.jForm-tit::after,
.jForm-tit em::after{
  content: '*';
  /* 必填符号的颜色 */
  color: red;
}
/* 修复污染iveiw */
.jForm-row .ivu-date-picker-cells span em{
  color: unset;
}
.jForm-row .ivu-date-picker-cells span em::before{
  content: none;
}

/*--------------额外功能--------------*/
/*带边框的表单*/
.jForm-borderStyle{
  border-color: #ccc;/*带边框表单的边框颜色*/
  border-style: solid;/*带边框表单的边框样式*/
  border-width: 1px;/*带边框表单的边框宽度*/
}
.jForm-borderStyle .jForm-row {
  margin: 0;
  padding: 0;
  border-color: inherit;
  border-style: inherit;
  border-width: 1px 0 0 0;/*带边框表单的内边框宽度*/
  overflow: hidden;
}
.jForm-borderStyle .jForm-row:first-child{
  border-top: none;
}
.jForm-borderStyle .jForm-tit,
.jForm-borderStyle .jForm-con{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-color: inherit;
  border-style: inherit;
  border-width: 0 0 0 1px;/*带边框表单的内边框宽度*/
  padding-bottom: 999em;
  margin-bottom: -999em;
}
.jForm-borderStyle .jForm-row .jForm-tit:first-child{
  border-left: none;
}
/*有标题的带边框表单fieldset*/
.jForm-borderStyle fieldset{
  border-color:inherit;
  border-style:inherit;
  border-width:0;
  margin: 0;
  padding: 0;
}
/*缩略图*/
.jForm-upImg{
  display: inline-block;
  width:2.5em;/*缩略图初始宽度*/
}
.jForm-upImg img{
  max-width:2.5em;/*缩略图最大宽度*/
  max-height:20px;/*缩略图图片的高度*/
}
.jForm-upImg:hover img{
  position:absolute;
  min-width:160px;/*缩略图大图 最小宽度*/
  min-height:160px;/*缩略图大图 最小高度*/
  max-width:300px;/*缩略图大图 最大宽度*/
  max-height:200px;/*缩略图大图 最大高度*/
  margin-left:-80px;/*缩略图大图 位置*/
  margin-top:-80px;/*缩略图大图 位置*/
  z-index:9;
}

/*--------------媒体查询自适应--------------*/
@media (max-width:767px){
  /*表单*/
  .jForm-row .jForm-tit{
    clear: both;
    width: 20%;
    *width: 19%;
  }
  .jForm-row .jForm-con{
    width: 80%;
    *width: 79%;
  }
  /*带边框表单*/


  /*网格化*/
  .JRow-grid.mobileStyle [class^=JSpan] {
    margin-left:0;
    width:100%;
  }
}


/*--------------复写老jform避免出问题--------------*/
.jForm-row .jForm-tit {
  text-align: left;
}
.jForm-row .jForm-con{
  padding-left: 0;
}
.jForm-row .jForm-lInput,
.jForm-row .jForm-mInput,
.jForm-row .jForm-sInput {
  padding-left: 0;
}
.jForm-row input{
  padding-left: 10px !important;
}
